//自定义模板
Vue.component('myheader',{
    props:["category_arr","isLogin","wd"], //配置自定义模板中用到的变量
    template:`
    <header class="container">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img alt="Brand" src="images/logo.png">
          </a>
        </div>
        <!--首页及分类-->
        <ul class="nav navbar-nav">
          <li><a href="home.html">首页</a></li>
          <li v-for="c in category_arr">
            <a :href="'home.html?cid='+c.id" v-text="c.name">手绘</a>
          </li>

          <li>
            <form action="">
              <input type="text" v-model="wd" placeholder="Search">
              <button type="button">
                <a class="fa fa-search" :herf="'home.html?wd='+wd"></a>
              </button>
            </form>
          </li>
        </ul>
        <!--右侧列表内容-->
        <ul class="nav navbar-nav navbar-right">
          <li v-if="!isLogin"><a href="login.html" class="fa fa-user-circle-o">管理员入口</a></li>
          <li v-if="isLogin">
            <a href="send.html" class="fa fa-user-circle-o">发布作品</a>
          </li>
          <li v-if="isLogin">
            <a href="banner.html" class="fa fa-user-circle-o">轮播图</a>
          </li>
          <li v-if="isLogin">
            <a href="/logout" class="fa fa-user-circle-o">退出登录</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
    
    `
})

//创建和header相关的vue对象
let header_vm = new Vue({
    el:"myheader",
    data:{
        category_arr:[],isLogin:false,wd:""
    },
    created:function () {
        //获取列表数据
        axios.get("/categorylist").then(function (response) {
            header_vm.category_arr = response.data;
        }).catch(function (err) {
            alert(err);
        })
        //检查用户是否登录过
        axios.get("/checklogin").then(function (response) {
            header_vm.isLogin = response.data;
        }).catch(function (err) {
            alert(err);
        })
    },
    methods:{
        logout:function () {
            //发出退出登录请求
            axios.get("/logout").then(function (response) {
                location.reload();//刷新页面
            }).catch(function (err) {
                alert(err);
            })
        },
        search:function () {
            location.href = "home.html?wd="+$("input").val();
        }
    }
})